<template>
  <div id="appfooter">
    <router-link v-for="val in appfooter" :to='val.path' :id="val.id" :class="active==val.id?'native':''" :key="val.id">{{val.text}}</router-link>
    <router-link :to="'/my/'+(userId==undefined?'0':userId)" id="myTab" :class="active=='myTab'?'native':''">我的</router-link>
  </div>
</template>

<script>
export default {
    data(){
        return {
            appfooter:[],
        }
    },
    computed:{
        userId(){
            for(let key in this.isLogin){
                if(this.isLogin[key]){
                    return key;
                }
            }
        }
    },
    props:['active'],
    created(){
        this.getAppFooter();
    },
    methods:{
        getAppFooter(){
        this.axios.get('/appfooter').then((ret)=>{
          let {data,error}=ret.data;
          this.appfooter=data;
        }).catch(()=>{})
      }
    }
}
</script>

<style scoped lang='scss'>
    #appfooter{
        width:750px;
        height:117px;
        position:fixed;
        bottom:0;
        border-top:1px solid #d9d9d9;
        background-color:#fff;
        display:flex;
        z-index: 200;
        a{
            text-decoration: none;
            color:#555;
            display:block;
            width:150px;
            font-size:28px;
            line-height: 28px;
            height:46px;
            text-align: center;
            background-size:56px auto;
            background-repeat: no-repeat;
            padding-top:75px;
            background-image:url(/static/home/nav6.2.png);
            position: relative;
        }
        .native{
            color: #39ac69;
        }
        #homeTab{
            background-position: center 0px;
        }
        #homeTab.native{
            background-position: center -117px;
        }
        #welfareTab{
            background-position: center -1400px;
        }
        #welfareTab.native{
            background-position: center -1515px;
        }
        #shopTab{
            background-position: center -234px;
        }
        #shopTab.native{
            background-position: center -351px;
        }
        #formTab{
            background-position: center -468px;
        }
        #formTab.native{
            background-position: center -585px;
        }
        #myTab{
            background-position: center -703px;
        }
        #myTab.native{
            background-position: center -820px;
        }
    }
</style>
